<template>
	<el-container>
		<el-aside width="250px">
			<el-menu active-text-color="#00ffff" background-color="#304156" default-active="welcome" text-color="#fff"
				unique-opened router>
				<el-menu-item index="welcome">
					<el-icon>
						<HomeFilled />
					</el-icon>
					<span>网站主页</span>
				</el-menu-item>
				<el-sub-menu index="1">
					<template #title>
						<el-icon>
							<Sunrise />
						</el-icon>
						<span>系统管理</span>
					</template>
					<el-menu-item index="user">
						<el-icon>
							<Watermelon />
						</el-icon>
						用户管理
					</el-menu-item>
					<el-menu-item index="role">
						<el-icon>
							<Pear />
						</el-icon>
						角色管理
					</el-menu-item>
					<el-menu-item index="menu">
						<el-icon>
							<NoSmoking />
						</el-icon>
						菜单管理
					</el-menu-item>
					<el-menu-item index="company">
						<el-icon>
							<Smoking />
						</el-icon>
						公司管理
					</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="2">
					<template #title>
						<el-icon>
							<Sunny />
						</el-icon>
						<span>课程管理</span>
					</template>
					<el-menu-item index="sort">
						<el-icon>
							<Mug />
						</el-icon>
						分类管理
					</el-menu-item>
					<el-menu-item index="courses">
						<el-icon>
							<GobletSquareFull />
						</el-icon>
						课程管理
					</el-menu-item>
					<el-menu-item index="video">
						<el-icon>
							<GobletFull />
						</el-icon>
						视频管理
					</el-menu-item>
					<el-menu-item index="appraise">
						<el-icon>
							<KnifeFork />
						</el-icon>
						评价管理
					</el-menu-item>
					<el-menu-item index="orders">
						<el-icon>
							<Sugar />
						</el-icon>
						订单管理
					</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="3">
					<template #title>
						<el-icon>
							<MostlyCloudy />
						</el-icon>
						<span>咨询师管理</span>
					</template>
					<el-menu-item index="consultants">
						<el-icon>
							<Bowl />
						</el-icon>
						咨询师信息管理
					</el-menu-item>
					<el-menu-item index="level">
						<el-icon>
							<MilkTea />
						</el-icon>
						等级管理
					</el-menu-item>
					<el-menu-item index="field">
						<el-icon>
							<Lollipop />
						</el-icon>
						擅长领域管理
					</el-menu-item>
					<el-menu-item index="toll">
						<el-icon>
							<Chicken />
						</el-icon>
						收费分类管理
					</el-menu-item>
					<el-menu-item index="standard">
						<el-icon>
							<Dish />
						</el-icon>
						收费标准管理
					</el-menu-item>
					<el-menu-item index="message">
						<el-icon>
							<IceTea />
						</el-icon>
						留言管理
					</el-menu-item>
					<el-menu-item index="evaluation">
						<el-icon>
							<ColdDrink />
						</el-icon>
						评价管理
					</el-menu-item>
					<el-menu-item index="consultantorders">
						<el-icon>
							<CoffeeCup />
						</el-icon>
						订单管理
					</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="4">
					<template #title>
						<el-icon>
							<PartlyCloudy />
						</el-icon>
						<span>内容管理</span>
					</template>
					<el-menu-item index="contentsort">
						<el-icon>
							<IceCream />
						</el-icon>
						文章分类管理
					</el-menu-item>
					<el-menu-item index="essay">
						<el-icon>
							<Dessert />
						</el-icon>
						文章管理
					</el-menu-item>
					<el-menu-item index="fmsort">
						<el-icon>
							<IceCreamSquare />
						</el-icon>
						FM分类管理
					</el-menu-item>
					<el-menu-item index="fmmanage">
						<el-icon>
							<ForkSpoon />
						</el-icon>
						FM管理
					</el-menu-item>
					<el-menu-item index="welfare">
						<el-icon>
							<IceCreamRound />
						</el-icon>
						公益中心管理
					</el-menu-item>
          <el-menu-item index="psykno">
            <el-icon>
              <IceCreamRound />
            </el-icon>
            心理知识管理
          </el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="5">
					<template #title>
						<el-icon>
							<Sunset />
						</el-icon>
						<span>心理测评管理</span>
					</template>
					<el-menu-item index="assessment">
						<el-icon>
							<Grape />
						</el-icon>
						心理测评管理
					</el-menu-item>
					<el-menu-item index="assessmentsort">
						<el-icon>
							<Fries />
						</el-icon>
						测评分类管理
					</el-menu-item>
					<el-menu-item index="questionBank">
						<el-icon><Smoking /></el-icon>
						测评题库管理
					</el-menu-item>
					<el-menu-item index="questionResult">
						<el-icon><Sugar /></el-icon>
						测评结果管理
					</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="6">
					<template #title>
						<el-icon>
							<Drizzling />
						</el-icon>
						<span>心理答疑管理</span>
					</template>
					<el-menu-item index="problem">
						<el-icon>
							<Apple />
						</el-icon>
						问题管理
					</el-menu-item>
					<el-menu-item index="reply">
						<el-icon>
							<Burger />
						</el-icon>
						回复管理
					</el-menu-item>
				</el-sub-menu>
				<el-menu-item index="booking">
					<el-icon>
						<Pouring />
					</el-icon>
					<span>咨询预约管理</span>
				</el-menu-item>
				<el-menu-item index="announcement">
					<el-icon>
						<Cloudy />
					</el-icon>
					<span>咨询公告管理</span>
				</el-menu-item>
				<el-menu-item index="integral">
					<el-icon>
						<Moon />
					</el-icon>
					<span>积分管理</span>
				</el-menu-item>

			</el-menu>
		</el-aside>
		<el-container>
			<el-header>
				<div class="hearder-left">
					<el-icon>
						<ChromeFilled />
					</el-icon>
				</div>
				<div class="hearder-right">
					<el-dropdown @command="handleCommand">
						<span class="el-dropdown-link">
							<img src="../assets/头像.jpg" alt="" />
							<span>欢迎您，{{username}}</span>
							<el-icon class="el-icon--right">
								<arrow-down />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="a">个人中心</el-dropdown-item>
								<el-dropdown-item command="b">修改资料</el-dropdown-item>
								<el-dropdown-item command="c">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script lang="ts" setup>
	import {
		useRouter
	} from 'vue-router';
	import {
		HomeFilled,
		Sunrise,
		Sunny,
		MostlyCloudy,
		PartlyCloudy,
		Sunset,
		Drizzling,
		Pouring,
		Cloudy,
		Moon,
		Watermelon,
		Pear,
		NoSmoking,
		Smoking,
		Mug,
		GobletSquareFull,
		GobletFull,
		KnifeFork,
		Sugar,
		Bowl,
		MilkTea,
		Lollipop,
		Coffee,
		Chicken,
		Dish,
		IceTea,
		ColdDrink,
		CoffeeCup,
		IceDrink,
		IceCream,
		Dessert,
		IceCreamSquare,
		ForkSpoon,
		IceCreamRound,
		Food,
		HotWater,
		Grape,
		Fries,
		Apple,
		Burger,
		ChromeFilled,
		ArrowDown,
	} from '@element-plus/icons-vue'
	import {
		onMounted,
		ref
	} from 'vue';
	// const router = useRouter()

	// const username = ref('')

	// const logout = () => {
	// 	sessionStorage.removeItem('loginUser')
	// 	router.replace('/login')
	// }

	// const handleCommand = (command : string | number | object) => {
	// 	if (command == 'c') {
	// 		logout()
	// 	}
	// }
	// onMounted(() => {
	// 	username.value = JSON.parse(sessionStorage.getItem('loginUser')).username
	// })
</script>

<style scoped>
	.el-aside {
		height: 100vh;
		background: #304156;
		width: 250px;
	}

	.el-header {
		height: 60px;
		box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
	}

	/* 全局 解决el-menu边缘不对齐问题 */
	.el-menu {
		border: none !important;
		width: 100%;
		/* 菜单占满侧边栏宽度 */
		padding: 0;
		/* 清除默认内边距，避免留白 */
	}

	.hearder-left {
		float: left;
		font-size: 50px;
		line-height: 60px;
		margin-top: 5px;
		cursor: pointer;
	}

	.hearder-right {
		float: right;
	}

	.hearder-right span {
		line-height: 60px;
		margin-left: 5px;
	}

	.hearder-right img {
		height: 50px;
		border-radius: 50px;
		vertical-align: middle;
	}

	.el-dropdown-link {
		outline: none;
	}
	
	.el-container {
	  height: 100vh; /* 外层容器占满视口高度 */
	  display: flex;  /* 启用 Flex 布局（Element Plus 容器默认已启用，确保兼容性） */
	}
</style>